<template>
  <div class="knowledge-index">
    <div class="title">
      <h1>Knowledge Base</h1>
    </div>
    <div class="search-index">
      <el-input :prefix-icon="Search" v-model="input" placeholder="Search..." />
    </div>
    <div class="wrapper">
      <div v-for="item in items" :key="item.id" class="box">
        <div class="logo">{{ item.logo }}</div>
        <div class="title">
          <h3>{{ item.title }}</h3>
          <p v-for="description in item.descriptions" :key="description">{{ description }}</p>
        </div>
        <div class="more">
          <span>More Tutorials</span>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-index">
        <h3>Community Forum</h3>
        <span>
          <p>Get help from community members, ask any questions and</p>
          <p>get answers faster.</p>
        </span>
        <span><h4>Join Community</h4></span>
      </div>
      <div class="card-index">
        <h3>Community Forum</h3>
        <span>
          <p>Get help from community members, ask any questions and</p>
          <p>get answers faster.</p>
        </span>
        <span><h4>Join Community</h4></span>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  import { Search } from '@element-plus/icons-vue'

  const input = ref(``)
  const items = ref([
    {
      id: 1,
      logo: `1`,
      title: `Getting Started`,
      descriptions: [`Guide to get started faster`, `Guide to get started faster`, `Guide to get started faster`],
    },
    {
      id: 2,
      logo: `1`,
      title: `Getting Started`,
      descriptions: [`Guide to get started faster`, `Guide to get started faster`, `Guide to get started faster`],
    },
    {
      id: 3,
      logo: `1`,
      title: `Getting Started`,
      descriptions: [`Guide to get started faster`, `Guide to get started faster`, `Guide to get started faster`],
    },
    {
      id: 4,
      logo: `1`,
      title: `Getting Started`,
      descriptions: [`Guide to get started faster`, `Guide to get started faster`, `Guide to get started faster`],
    },
  ])
</script>

<style lang="scss" scoped>
  .knowledge-index {
    padding: 1rem;

    .title {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 36px;
      color: rgba(19, 21, 35, 1);
      text-align: left;
      vertical-align: top;
      margin-bottom: 2rem;
    }

    .search-index {
      :deep(.el-input__wrapper) {
        height: 3rem;
      }
      :deep(.el-icon svg) {
        height: 1.0625rem;
        width: 1.0625rem;
        color: var-breadcrumbrgba(126, 132, 163, 1);
      }
      :deep(.el-input__inner::placeholder) {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(161, 167, 196, 1);
        text-align: left;
        vertical-align: top;
      }
    }

    .wrapper {
      display: flex;
      justify-content: space-between;
      margin-top: 1rem;
    }

    .box {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 1px 4px rgba(21, 34, 50, 0.08);
      color: black;
      border-radius: 5px;
      width: 23rem;
      height: 25.0625rem;

      .logo {
        width: 100%;
        height: 50%;
        background-color: aqua;
      }

      .title {
        margin-left: 1rem;

        h3 {
          font-size: 20px;
          font-weight: 600;
          letter-spacing: 0px;
          line-height: 28px;
          color: rgba(19, 21, 35, 1);
          text-align: left;
          vertical-align: top;
          margin-bottom: 1rem;
        }

        p {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: rgba(19, 21, 35, 1);
          text-align: left;
          vertical-align: top;
          margin-top: 0.5rem;
        }
      }

      .more {
        margin-left: 1rem;
        height: 1rem;

        span {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: rgba(30, 94, 255, 1);
          text-align: left;
          vertical-align: top;
        }
      }
    }

    .card {
      margin-top: 2rem;
      display: flex;
      justify-content: space-between;
      .card-index {
        width: 49rem;
        height: 11rem;
        border-radius: 4px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 4px rgba(21, 34, 50, 0.08);

        h3 {
          font-size: 20px;
          font-weight: 600;
          letter-spacing: 0px;
          line-height: 28px;
          color: rgba(19, 21, 35, 1);
          text-align: left;
          vertical-align: top;
          margin-left: 1.75rem;
          margin-top: 1.75rem;
        }
        span > p {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: rgba(19, 21, 35, 1);
          text-align: left;
          vertical-align: top;
          margin-left: 1.75rem;
          margin-top: 0.25rem;
        }

        span > h4 {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: rgba(30, 94, 255, 1);
          text-align: left;
          vertical-align: top;
          margin-left: 1.75rem;
          margin-top: 1rem;
        }
      }
    }
  }
</style>
